<template>
	<view>
		<u-alert-tips type="warning" v-if="freenum>=0" :title="'本月免费发布'+freenum+'条,已发布'+publishedNum+'条'" borderColor="#fdf6ec"
			:title-style="{'color':'#FE9C01'}">
		</u-alert-tips>
		<view class="form">
			<u-form-item label="标题" label-width="150rpx" label-position="top">
				<u-input v-model="form.name" type="text" placeholder="请输入" />
			</u-form-item>
			<u-form-item label="房屋类型" label-width="150rpx">
				<u-radio-group v-model="form.rootType" @change="radioGroupChange">
					<u-radio shape="circle" active-color="#f44c01" v-for="(item, index) in radioList" :key="index"
						:name="item.name">{{ item.label }}</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="户型" label-width="150rpx">
				<u-input v-model="houseType_text" type="select" @click="houseTypeShow=true" placeholder="请选择" />
			</u-form-item>
			<u-form-item label="面积" label-width="150rpx">
				<view style="display: flex;flex-direction: row;align-items: center;flex: 1;">
					<u-input style="flex: 1;" v-model="form.mianji" placeholder="请输入" />
					<text>㎡</text>
				</view>
			</u-form-item>
			<u-form-item label="租金" label-width="150rpx">
				<view style="display: flex;flex-direction: row;align-items: center;flex: 1;">
					<u-input style="flex: 1;" v-model="form.zujin" placeholder="请输入" />
					<text>元/月</text>
				</view>
			</u-form-item>
			<u-form-item label="朝向" label-width="150rpx">
				<u-input v-model="form.chaoxiang" type="select" @click="chaoxiangShow=true" placeholder="请选择" />
			</u-form-item>
			<u-form-item label="装修" label-width="150rpx">
				<u-input v-model="zhuangxiu" type="select" @click="zhuangxiuShow=true" placeholder="请选择" />
			</u-form-item>
			<u-form-item label="楼层" label-width="150rpx">
				<u-input v-model="form.loucheng" type="number" laceholder="请输入" />
			</u-form-item>
			<u-form-item label="房屋地址" label-width="150rpx">
				<u-input v-model="form.address" @click="opensite" type="select" placeholder="请选择" />
			</u-form-item>
			<u-form-item label="房屋配置" label-width="150rpx">
				<view class="rowcell" @click="showConfig()">
					<text style="color: rgb(192, 196, 204);flex: 1;" v-if="config_names.length===0">请选择</text>
					<block v-else>
						<view class="cell">
							<text class="item" v-for="(item,index) in config_names" :key="index">{{item}}</text>
						</view>
					</block>
					<u-icon name="arrow-down-fill" color="#999999" size="28"></u-icon>
				</view>
			</u-form-item>
			<u-form-item label="标签" label-width="150rpx">
				<view class="rowcell" @click="showLabel()">
					<text style="color: rgb(192, 196, 204);flex: 1;" v-if="label_names.length===0">请选择</text>
					<block v-else>
						<view class="cell">
							<text class="item" v-for="(item,index) in label_names" :key="index">{{item}}</text>
						</view>
					</block>
					<u-icon name="arrow-down-fill" color="#999999" size="28"></u-icon>
				</view>
			</u-form-item>
			<u-form-item label="房屋图片" label-width="150">
				<u-upload width="160" height="160" :action="action" max-count="6" :file-list="imglist"
					@on-success="imgSuccess" @on-remove="imgRemove"></u-upload>
			</u-form-item>
			<u-form-item label="房屋描述" label-width="200rpx" label-position="top">
				<u-input v-model="form.remark" type="textarea" height="200" :maxlength="-1" placeholder="请输入房屋描述" />
			</u-form-item>
			<u-form-item label="联系人" label-width="150rpx">
				<u-input v-model="form.contactName" placeholder="请输入" />
			</u-form-item>
			<u-form-item label="联系电话" label-width="150rpx">
				<u-input v-model="form.contactPhone" placeholder="请输入" />
			</u-form-item>
			<u-form-item v-if="isZhiding" label="信息置顶" label-width="150rpx">
				<view class="rowcell" @click="openTop()">
					<text style="color: #F44C01;flex: 1;">{{seltop.text}}</text>
					<u-icon name="arrow-down-fill" color="#999999" size="28"></u-icon>
				</view>
			</u-form-item>
		</view>
		<u-select v-model="houseTypeShow" :list="houseTypeData" mode="mutil-column" @confirm="confirmHouseType">
		</u-select>
		<u-select v-model="chaoxiangShow" :list="chaoxiangData" @confirm="confirmchaoxiang">
		</u-select>
		<u-select v-model="zhuangxiuShow" :list="zhuangxiuData" @confirm="confirmzhuangxiu">
		</u-select>
		<mulselect ref="mulselect" :listData="mulData" :is_mult="true" @confirem="confiremLabel"></mulselect>
		<mulselect ref="configSelect" :listData="configData" :is_mult="true" @confirem="confiremConfig"></mulselect>
		<topmodel ref="topmodel" :listData="topList" @confirem="confiremTop"></topmodel>
		<view style="height: 120rpx;"></view>
		<botbtn btntext="发布" @confirem="submit"></botbtn>
	</view>
</template>

<script>
	import topmodel from '@/components/Topmodel/Topmodel.vue'
	import botbtn from '@/components/Botbtn/Botbtn.vue'
	import mulselect from '@/components/yunmiao-mulselect/yunmiao-mulselect.vue'
	import {
		API_URL
	} from '@/env.js'
	export default {
		components: {
			topmodel,
			botbtn,
			mulselect
		},
		data() {
			return {
				freenum: -1,
				publishedNum:0,
				form: {
					name: '',
					rootType: 'house',
					room: '',
					hall: '',
					loo: '',
					pics: '',
					mianji: '',
					zujin: '',
					chaoxiang: '',
					loucheng: '',
					zhuangxiu: '',
					userType: '出租',
					tagIds: '',
					configIds: '',
					remark: '',
					address: '',
					lat: '',
					lng: '',
					person_name: '',
					person_mobile: '',
					topId: 0,
				},
				houseType_text: '',
				zhuangxiu: '',
				config_names: [],
				label_names: [],
				houseTypeShow: false,
				chaoxiangShow: false,
				zhuangxiuShow: false,
				labelShow: false,
				radioList: [{
						name: '住宅',
						label: '住宅',
					},
					{
						name: '商铺',
						label: '商铺',
					}
				],
				topList: [{
					id: 0,
					top_day: 0,
					price: 0,
				}],
				seltop: {
					id: 0,
					text: '不置顶'
				},
				mulData: [],
				chaoxiangData: [{
						value: '东',
						label: '东'
					}, {
						value: '西',
						label: '西'
					}, {
						value: '南',
						label: '南'
					}, {
						value: '北',
						label: '北'
					}, {
						value: '东南',
						label: '东南'
					},
					{
						value: '东北',
						label: '东北'
					},
					{
						value: '西南',
						label: '西南'
					},
					{
						value: '西北',
						label: '西北'
					},
					{
						value: '南北',
						label: '南北'
					},
					{
						value: '东西',
						label: '东西'
					},
				],
				zhuangxiuData: [{
					value: '毛坯',
					label: '毛坯'
				}, {
					value: '简装',
					label: '简装'
				}, {
					value: '精装',
					label: '精装'
				}, ],
				houseTypeData: [
					[{
							value: 1,
							label: '1室'
						},
						{
							value: 2,
							label: '2室'
						}, {
							value: 3,
							label: '3室'
						}, {
							value: 4,
							label: '4室'
						}, {
							value: 5,
							label: '5室'
						}, {
							value: 6,
							label: '6室'
						}, {
							value: 7,
							label: '7室'
						}, {
							value: 8,
							label: '8室'
						}, {
							value: 9,
							label: '9室'
						}, {
							value: 10,
							label: '10室'
						},
					],
					[{
							value: 0,
							label: '0厅'
						}, {
							value: 1,
							label: '1厅'
						},
						{
							value: 2,
							label: '2厅'
						}, {
							value: 3,
							label: '3厅'
						}, {
							value: 4,
							label: '4厅'
						}, {
							value: 5,
							label: '5厅'
						}, {
							value: 6,
							label: '6厅'
						}, {
							value: 7,
							label: '7厅'
						}, {
							value: 8,
							label: '8厅'
						}, {
							value: 9,
							label: '9厅'
						}, {
							value: 10,
							label: '10厅'
						},
					],
					[{
							value: 0,
							label: '0卫'
						},
						{
							value: 1,
							label: '1卫'
						},
						{
							value: 2,
							label: '2卫'
						}, {
							value: 3,
							label: '3卫'
						}, {
							value: 4,
							label: '4卫'
						}, {
							value: 5,
							label: '5卫'
						}, {
							value: 6,
							label: '6卫'
						}, {
							value: 7,
							label: '7卫'
						}, {
							value: 8,
							label: '8卫'
						}, {
							value: 9,
							label: '9卫'
						}, {
							value: 10,
							label: '10卫'
						},
					],

				],
				configData: [],
				action: API_URL + '/tc/uploadToMinio',
				imglist: [],
				isZhiding:false,
			};
		},
		onLoad() {
			this.getTopConfig()
			this.getLabels('house_rent_label')
			this.getLabels('house_config')
			this.getCateFreeNum()
		},
		methods: {
			getCateFreeNum() {
				this.$u.get('/home/level/getCateFreeNum', {type:1
				}).then(res => {
					this.freenum = res.roomCount;
this.publishedNum = 3;
				})
			},
			getLabels(type) {
			this.$u.get('/home/getLabel', {
					'dictType': type
				}).then(res => {
					if (type == 'house_rent_label') {
						this.mulData = res;
					} else {
						//house_config
						this.configData = res;
					}
				})
			},
			getTopConfig() {
				this.$u.get('/home/getLabel', {
                'dictType':'topConfig'
				}).then(res => {
					this.topList = this.topList.concat(res)
					if(res && res.length>0){
                       this.isZhiding = true;
                   	}
				})
			},
			openTop() {
				this.$refs.topmodel.show()
			},
			confiremTop(e) {
				this.form.topId = e.id;
				if (e.top_day == 0) {
					e.text = '不置顶';
				} else {
					e.text = e.dictLabel + '天-￥'+ e.dictValue;
				}
				this.seltop = e;
			},
			confirmHouseType(e) {
				this.form.room = e[0].value;
				this.form.hall = e[1].value;
				this.form.loo = e[2].value;
				this.houseType_text = e[0].label + e[1].label + e[2].label;
			},
			confirmchaoxiang(e) {
				this.form.chaoxiang = e[0].value;
			},
			confirmzhuangxiu(e) {
				this.form.zhuangxiu = e[0].value;
				this.zhuangxiu = e[0].label;
			},
			showConfig() {
				this.$refs.configSelect.show()
			},
			showLabel() {
				this.$refs.mulselect.show()
			},
			confiremLabel(e) {
				this.form.tagIds = e.ids.join(',');
				this.label_names = e.labels;
			},
			confiremConfig(e) {
				this.form.configIds = e.ids.join(',');
				this.config_names = e.labels;
			},
			imgRemove(index, lists, name) {
				let banner = [];
				lists.map((item) => {
					banner.push(item.response.data);
				})
				if (banner.length > 0) {
					this.form.pics = banner.join(',');
				} else {
					this.form.pics = '';
				}
			},
			imgSuccess(data, index, lists, name) {
				let banner = [];
				lists.map((item) => {
					banner.push(item.response.data);
				})
				if (banner.length > 0) {
					this.form.pics = banner.join(',');
				}
			},
			opensite() {
				var that = this;
				uni.chooseLocation({
					success: function(res) {
						that.form.lon = res.latitude;
						that.form.lin = res.longitude;
						that.form.address = res.address;
					}
				});
			},
			submit() {
				if (this.form.name == '') {
					return this.$u.toast('请输入标题')
				}
				if (this.form.rootType == '') {
					return this.$u.toast('请选择房屋类型')
				}
				if (this.form.room === '' || this.form.hall === '' || this.form.loo === '') {
					return this.$u.toast('请选择户型')
				}
				if (this.form.mianji == '') {
				
					return this.$u.toast('请输入面积')
				}
				if (this.form.zujin == '') {
					return this.$u.toast('请输入租金')
				}
				if (this.form.chaoxiang == '') {
					return this.$u.toast('请选择朝向')
				}
				if (this.form.zhuangxiu == '') {
					return this.$u.toast('请选择装修')
				}
				if (this.form.loucheng == '') {
					return this.$u.toast('请输入楼层')
				}
				if (this.form.lin == '' || this.form.lon == '' || this.form.address == '') {
					return this.$u.toast('请选择房屋地址')
				}
				if (this.form.pics == '') {
					return this.$u.toast('请上传房屋图片')
				}
				if (this.form.remark == '') {
					return this.$u.toast('请输入房屋描述')
				}
				if (this.form.contactName == '') {
					return this.$u.toast('请输入联系人')
				}
				if (this.form.contactPhone == '') {
					return this.$u.toast('请输入联系电话')
				}
				if (!this.$u.test.mobile(this.form.contactPhone)) {
					return this.$u.toast('请输入正确的联系电话')
				}
				this.form.huxing=this.houseType_text
				//this.form.room+'-'+this.form.hall+'-'+this.form.loo
				this.$u.post('/tc/saveRoom', this.form).then(res => {
					if (res.status == '1') {
						this.$u.route({
							type: 'redirectTo',
							url: '/pagesPush/pay/pay',
							params: {
								order: JSON.stringify(res),
								type: 'house'
							},
						});
					} else {
						this.$u.route({
							type: 'redirectTo',
							url: '/pagesPush/push_result/push_result',
							params: {
								type: 'push'
							}
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form {
		padding: 20rpx;
		background-color: white;
	}

	.rowcell {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex: 1;

		.cell {
			display: flex;
			flex-direction: row;
			align-items: center;
			flex-wrap: wrap;
			flex: 1;

			.item {
				font-size: 25rpx;
				background-color: #F8F8F8;
				padding: 0rpx 15rpx;
				border-radius: 5rpx;
				margin: 5rpx;
				height: 50rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>
